<template>
    <div style="position: relative;height: 24px;width: 50px">
        <Progress class="aaa" :percent="percent" hide-info :stroke-width="20"></Progress>
        <div
            style="line-height:24px;text-align: center;position: absolute;width: 100%;color: #ffffff;height: 24px">
            {{percent}}%
        </div>
    </div>
</template>

<script>
    export default {
        name: "myProgress",
        data() {
            return {}
        },
        props: {
            percent: {  //当前页数
                type: Number,
                default: 0
            }
        },
        components: {},
        created() {

        },
        mounted() {
        },
        computed: {},
        methods: {}
    }
</script>

<style>

    .aaa {
        position: absolute;
        width: 50px;
    }

    .aaa .ivu-progress-inner {
        background: #AFB6C0;
        border-radius: 2px;;
    }

    .aaa .ivu-progress-bg {
        border-radius: 2px;
        background: linear-gradient(to right, #77BBFA, #4285F4);
    }
</style>
